﻿<%@ Page Title="精美图库" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    Inherits="Wjtour.Web.Front.galleryshow" %>

<%@ Import Namespace="Wjtour.Domain" %>
<%@ Import Namespace="Wjtour.Common" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script language="javascript">
        $(document).ready(function () {
            $('.btn').css('top', '100px');
        });
        function myEvent(obj, ev, fu) {
            obj.attachEvent ? obj.attachEvent('on' + ev, fu) : obj.addEventListener(ev, fu, false);
        }
        window.onload = function () {
            var oBox = document.getElementById('ztbox');
            var oLeft = document.getElementById('left');
            var oRight = document.getElementById('right');
            var oConter = document.getElementById('conter');
            var oUl = oConter.getElementsByTagName('ul')[0];
            var oLi = oConter.getElementsByTagName('li');
            var oScroll = document.getElementById('scroll');
            var oSpan = oScroll.getElementsByTagName('span')[0];
            var i = 0;
            oUl.style.width = oLi.length * (oLi[0].offsetWidth + 4) + 'px';
            //var iWidth = oScroll.offsetWidth/(oUl.offsetWidth / oConter.offsetWidth - 1)
            var iWidth = 88;
            oLeft.onmouseover = oRight.onmouseover = function () {
                this.className = 'hover';
                //点击左侧按钮
                oLeft.onclick = function () {
                    var butscroll = oSpan.offsetLeft - iWidth;
                    oscroll(butscroll);
                };
                //点击右侧按钮
                oRight.onclick = function () {
                    var butscroll = oSpan.offsetLeft + iWidth;
                    oscroll(butscroll);
                };
            };
            //点击滚动条
            oScroll.onclick = function (e) {
                var oEvent = e || event;
                var butscroll = oEvent.clientX - oBox.offsetLeft - 43 - oSpan.offsetWidth / 2;
                oscroll(butscroll);
            };
            oSpan.onclick = function (e) {
                var oEvent = e || event;
                oEvent.cancelBubble = true;
            }
            oLeft.onmouseout = oRight.onmouseout = function () {
                this.className = '';
            };
            //拖拽滚动条
            var iX = 0;
            oSpan.onmousedown = function (e) {
                var oEvent = e || event;
                iX = oEvent.clientX - oSpan.offsetLeft;
                document.onmousemove = function (e) {
                    var oEvent = e || event;
                    var l = oEvent.clientX - iX;
                    td(l);
                    return false;
                };
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
                return false;
            };
            //滚轮事件
            function fuScroll(e) {
                var oEvent = e || event;
                var l = oSpan.offsetLeft;
                oEvent.wheelDelta ? (oEvent.wheelDelta > 0 ? l -= iWidth : l += iWidth) : (oEvent.detail ? l += iWidth : l -= iWidth);
                oscroll(l)
                if (oEvent.PreventDefault) {
                    oEvent.PreventDefault();
                }
            }
            myEvent(oConter, 'mousewheel', fuScroll);
            myEvent(oConter, 'DOMMouseScroll', fuScroll);
            //滚动事件
            function oscroll(l) {
                if (l < 0) {
                    l = 0;
                } else if (l > oScroll.offsetWidth - oSpan.offsetWidth) {
                    l = oScroll.offsetWidth - oSpan.offsetWidth;
                }
                var scrol = l / (oScroll.offsetWidth - oSpan.offsetWidth);
                sMove(oSpan, 'left', Math.ceil(l));
                sMove(oUl, 'left', '-' + Math.ceil((oUl.offsetWidth - (oConter.offsetWidth)) * scrol));
            }

            function td(l) {
                if (l < 0) {
                    l = 0;
                } else if (l > oScroll.offsetWidth - oSpan.offsetWidth) {
                    l = oScroll.offsetWidth - oSpan.offsetWidth;
                }
                var scrol = l / (oScroll.offsetWidth - oSpan.offsetWidth);
                oSpan.style.left = l + 'px';
                oUl.style.left = '-' + (oUl.offsetWidth - (oConter.offsetWidth + 4)) * scrol + 'px';
            }
        };
        //运动框架
        function getStyle(obj, attr) {
            return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
        }
        function sMove(obj, attr, iT, onEnd) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                dMove(obj, attr, iT, onEnd);
            }, 30);
        }
        function dMove(obj, attr, iT, onEnd) {
            var iCur = 0;
            attr == 'opacity' ? iCur = parseInt(parseFloat(getStyle(obj, attr) * 88)) : iCur = parseInt(getStyle(obj, attr));
            var iS = (iT - iCur) / 6;
            iS = iS > 0 ? Math.ceil(iS) : Math.floor(iS);
            if (iCur == iT) {
                clearInterval(obj.timer);
                if (onEnd) {
                    onEnd();
                }
            } else {
                if (attr == 'opacity') {
                    obj.style.ficter = 'alpha(opacity:' + (iCur + iS) + ')';
                    obj.style.opacity = (iCur + iS) / 88;
                } else {
                    obj.style[attr] = iCur + iS + 'px';
                }
            }
        }
        //图片切换
        function picCha() {
            var bsrc = $(this).attr('src');
            $('.bpic').attr('src', bsrc);
            $('.btn').css('top', ($('.bpic').height() / 2 - 36) + 'px');
            var h2title = $(this).parent().find('.txt h2').text();
            var ptitle = $(this).parent().find('.txt p').text();
        };
        function getnum() {
            var num = $('#conter li').length;
            $('.snum strong').text(num);
            var count = 1;
            var icount = 0;
            $('#conter li').each(function () {
                if ($(this).hasClass("on")) {
                    icount = count;
                } else {
                    count++;
                }
                //var fnum=$(this).index()+1;
                //$(this).find('b').text(fnum);
            });
            $('#nums').text(icount + '/' + num);
        };
        $(function () {
            $('.smallpic').bind('click', picCha);
            $('#conter li').click(function () {
                $(this).siblings().removeClass('on');
                $(this).addClass('on');
                getnum();
            });
            getnum();
            $('.pre').click(function () {
                var qsrc = $('.on').find('img').attr('src');
                var firstSrc = $('#conter li').first().find('img').attr('src');
                if (qsrc == firstSrc) {
                    alert('这是第一张');//在这里跳入上一个相册
                    return false;
                }
                var h2title = $(this).parents('.box-163css').find('.on').prev('li').find('h2').text();
                var ptitle = $(this).parents('.box-163css').find('.on').prev('li').find('p').text();
                $('.intro h2').text(h2title);
                $('.intro p').text(ptitle);
                $(this).parents('.box-163css').find('.on').removeClass('on').prev().addClass('on');
                $('.bpic').attr('src', qsrc);
                $('.btn').css('top', ($('.bpic').height() / 2 - 36) + 'px');
                getnum();
            });
            $('.next').click(function () {
                var qsrc = $('.on').find('img').attr('src');
                var lastSrc = $('#conter li').last().find('img').attr('src');
                if (qsrc == lastSrc) {
                    alert('已经到最后一张');// 在这里跳入下一个相册
                    return false;
                }
                var h2title = $(this).parents('.box-163css').find('.on').next('li').find('h2').text();
                var ptitle = $(this).parents('.box-163css').find('.on').next('li').find('p').text();
                $(this).parents('.box-163css').find('.on').removeClass('on').next().addClass('on');
                getnum();
                $('.bpic').attr('src', qsrc);
                $('.btn').css('top', ($('.bpic').height() / 2 - 36) + 'px');

            });
        })
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="content" runat="server">
    <div class="ipage indexpage">
        <div class="bpath">当前位置：<a href="/">首页</a> &gt; 美图欣赏 &gt; 精美图库</div>
        <div class="imgbox">
            <h5><%=galleryname %>(<span id="nums"></span>)<span class="date"><%=galleryaddtime %></span></h5>




            <div class="box-163css">
                <div class="bigshow">
                    <div class="btn pre"></div>
                    <div class="bigpic">
                        <%if (pictures != null && pictures.Count > 0)
                          {
                              var fp = pictures.First();
                        %>
                        <img class="bpic" src="<%=fp.picturepath %>" />
                        <%} %>
                    </div>
                    <div class="btn next"></div>
                </div>
                <br />
                <br />
                <div id="scroll"><span></span></div>
                <div id="ztbox">
                    <div class="spic">
                        <div id="prealbum">
                            <a href="galleryshow.aspx?id=<%=prevGalleryId %>">
                                <img src="css/images/prealbum.png" alt="上一图集" />
                            </a>
                        </div>
                        <div id="left"></div>
                        <div id="conter">
                            <ul>
                                <%if (pictures != null && pictures.Count > 0)
                                  {
                                      int index = 0;
                                      var on = "class=\"on\"";

                                      foreach (var item in pictures)
                                      {
                                          if (index > 0)
                                          {
                                              on = string.Empty;
                                          }
                                          index++;
                                %>
                                <li <%=on %>>
                                    <img class="smallpic" src="<%=item.picturepath %>" />
                                </li>
                                <%}
                                  } %>
                            </ul>
                        </div>
                        <div id="right"></div>
                        <div id="nextalbum">
                            <a href="galleryshow.aspx?id=<%=nextGalleryId%>">
                                <img src="css/images/nextalbum.png" alt="下一图集" />
                            </a>
                        </div>
                    </div>

                </div>
            </div>

            <div class="clear"></div>
        </div>

    </div>
</asp:Content>


